<%@ page pageEncoding="utf-8" language="java"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html:html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<html:base/>
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/styles/style1.css" type="text/css" />
	<title>Role2Function編輯頁</title>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.selectboxes.min.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.multiselects-0.3.pack"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.multiselects-0.3.js"></script>
	<script type="text/javascript">
	function restore() {
		var a2r = $('select[name="role2function"]');
		a2r.sortOptions(false);
		var data = '[';
		a2r.find('option').each(function() {
			func_id = $(this).val();
			if (data.length > 1) data += ',';
			data += '{"funcname":"' + $(this).text() + '", "funcid":' + func_id + ', "items":[';

			var r2i = $('#tableItem tr[name="func_' + func_id+ '"]');
			var subData = '';
			r2i.each(function() {
				var itemId = $(this).children('td:first').text();
				var visableFlag = $(this).children('td:eq(3)').children('input').attr('checked');
				var enableFlag = $(this).children('td:eq(4)').children('input').attr('checked');
				//if (visableFlag == true || enableFlag == true) {
					if (subData.length > 1) subData += ',';
					var itemName = $(this).children('td:eq(1)').text();
					subData += '{"id":"' + itemId
							+ '", "itemname":"' + itemName
							+ '", "visable":' + ((visableFlag == true) ? '"N"' : '""')
							+ ', "enable":' + ((enableFlag == true) ? '"N"' : '""')
							+ '}';
				//}
			});
			data += subData;
			data += ']';
			data += '}';
		});
		data += ']';
//		alert(data);
		if (window.dialogArguments != null) {
			window.dialogArguments.reselectFunction(data);
		}
		window.opener = null;
		window.close();
	};

	function buildFunctionBox(data) {
		$('td select[name="functions"]').empty();
		$.each(data, function(i) {
			$('td select[name="functions"]').addOption(
					data[i].id,
					data[i].functionname);
		});
	};

	function buildSelectedBox(data) {
		$('td select[name="role2function"]').empty();
		$.each(data, function(i) {
			$('td select[name="role2function"]').addOption(
					data[i].id,
					data[i].functionname);
		});
	};

	function buildItemTable(tableData) {
		var tableBody = $("#tableItem");
		tableBody.html("");
	    //add the table rows
		$.each(tableData, function(i){
	        tableBody.append('<tr name="func_' + tableData[i].function_id + '"></tr>');
	        var tr = $('tr:last', tableBody);
            tr.append('<td width="10%">' + tableData[i].id + '</td>');
            tr.append('<td width="25%">' + tableData[i].itemname + '</td>');
            tr.append('<td width="25%">' + tableData[i].alias + '</td>');
            if (tableData[i].visable == 'N')
            	tr.append('<td><input type="checkbox" name="chkVisable" id="chkVisable" value="N" checked value="A"/></td>');
            else
            	tr.append('<td><input type="checkbox" name="chkVisable" id="chkVisable" value="N" value="A"/></td>');
            if (tableData[i].enable == 'N')
            	tr.append('<td><input type="checkbox" name="chkEnable" id="chkEnable" value="N" checked /></td>');
            else
            	tr.append('<td><input type="checkbox" name="chkEnable" id="chkEnable" value="N" /></td>');
		});
		$('#tableItem tr').hide();
	};

	// function click to change function item display
	$(function() {
		$('td select[name="role2function"]').change(function(){
			$('#tableItem tr').hide();
			$('#tableItem tr[name="func_' + $(this).val() + '"]').show();
			return false;
		});
	});

	$(function() {
		$('select').addClass('blue');
		// initial non-select area
		$.ajax({
			url: '<c:out value="${ctx}"/>/ajaxRoleQueryFunction.do',
			type: 'POST',
			data: 'role_id=' + '<c:out value="${role_id}"/>',
			dataType: 'json',
			success: function(data, status){
				buildFunctionBox(data);
			},
			error: function(xhrInstance, status, xhrException) {
				alert("failure:" + status);
				alert(xhrException);
			}
		});
		// initial selected area
		$.ajax({
			url: '<c:out value="${ctx}"/>/ajaxRoleQueryFunctionSelected.do',
			type: 'POST',
			data: 'role_id=' + '<c:out value="${role_id}"/>',
			dataType: 'json',
			success: function(data, status){
				buildSelectedBox(data);
			},
			error: function(xhrInstance, status, xhrException) {
				alert("failure:" + status);
				alert(xhrException);
			}
		});
		// initial <table> area
		$.ajax({
			url: '<c:out value="${ctx}"/>/ajaxRoleQueryItem.do',
			type: 'POST',
			data: 'role_id=' + '<c:out value="${role_id}"/>',
			dataType: 'json',
			success: function(data, status){
				buildItemTable(data);
			},
			error: function(xhrInstance, status, xhrException) {
				alert("failure:" + status);
				alert(xhrException);
			}
		});

		// (OPTIONAL) adjust the width of the select box to the bigger of the two
		$("select[name='functions']").selectAdjustWidth("select[name='role2function']");

		$("select[name='functions']").multiSelect("select[name='role2function']", {
			trigger: "input[name='remove']",
			triggerAll: "input[name='removeAll']"
			});

		$("select[name='role2function']").multiSelect("select[name='functions']", {
			trigger: "input[name='add']",
			triggerAll: "input[name='addAll']"
			});
	});
	</script>
</head>
<body>
<input type='text' name='role_id' value='<c:out value="${role_id}"/>'/>
<form action="">
<table id="Rolesframe2" >

<tr>
	<th height="51" colspan="4" class="th" >編輯區     </th>
</tr>
<tr>
	<td width="22%" height="172" rowspan="2" class="leftblock"><p>待選功能</p>
		<html:select property="functions" name="lazyForm" size="10" multiple="multiple" /><p/>
    </td>
    <td width="6%" class="butblock" >
	    <table class="buttonblock" width="100%" >
	   			 <tr><td height="27"> <input name="removeAll" type="button" class="button removeAllButton" value="&gt;&gt;" title="Remove all"></td></tr>
	             <tr><td height="27"> <input name="remove" type="button" class="button removeButton" value="&gt;" title="Choose selected and remove"></td></tr>
	             <tr><td height="27"> <input name="add"    type="button" class="button addButton"    value="&lt;" title="Choose available and add" /></td></tr>
	             <tr><td height="27"> <input name="addAll" type="button" class="button addAllButton" value="&lt;&lt;" title="Add all"></td></tr>
	    </table>
	    <p/>
    </td>
    <td width="22%" rowspan="2" class="rightblock"><p >已選功能</p>
		<html:select property="role2function" name="lazyForm" size="10" multiple="multiple" /><p/>
	</td>
	<td width="40%" class="block"><p>功能項設定</p>
	    <div class="Falselistbox" >
	    	<table width="100%" border="0">
				<thead>
					<tr>
						<th width="10%">ID</th>
						<th width="30%">功能項名稱</th>
						<th width="30%">功能項別名</th>
						<th width="15%">隱藏</th>
						<th width="15%">失效</th>
					</tr>
				</thead>
				<tbody id="tableItem">
				</tbody>
	    	</table>
	    </div>
    </td>
</tr>
</table>
<p/>
<div id="sendset">
	<input type="submit" name="button" id="button" value="返回" onclick="restore()" />
	<input type="submit" name="button2" id="button2" value="關閉" onclick="window.close()" />
</div>

</form>
</body>
</html:html>